<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><style type="text/css">
body { padding: 0; margin: 0;}
div {
   font: 12px Arial;
}

span.bold { font-weight: bold; }

#div1, #div4 {
   width: 150px;
   height: 200px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
   margin-left: 100px;
   position:relative;
}
#div1 { margin-top: 20px; }
#div2, #div3  {
  
  
   border: 1px dashed #009900;
   background-color: #ccffcc;
   text-align: center;
	position:absolute; 
	
}
#div2 {
	 width: 220px;
	  height: 80px;
	top:175px;
   left: 20px;   
   z-index: 0; 
}
#div3 {
	 width: 120px;
	  height: 200px;
	top:160px;
   left:   240px; 
   z-index: auto; 
}


</style></head>

<body>



<div id="div1">
<br /><span class="bold">DIV #1</span>
<br />position:relative;
<br />(no z-index)
</div>

<div id="div2">
<br /><span class="bold">DIV #2</span>
<br />position:absolute;
<br />z-index: 0;
</div>

<div id="div3">
<br /><span class="bold">DIV #3</span>
<br />position:absolute;
<br />z-index: auto;
</div>

<br />

<div id="div4">
<br /><span class="bold">DIV #4</span>
<br />position:relative;
<br />(no z-index)
</div>

<script src="../dist/zviz.dist.js" type="text/javascript"></script>

</body></html>